<!--首页 -->
<template>
    <div class="home">
        <!-- 准备二级路有坑 这里是路由route注意和下面的路由跳转区分 -->
        <router-view v-if="$route.path == '/home/searchpop'"></router-view>
        <!-- <router-view></router-view> -->
        <div v-else>
            <!-- 搜索栏 -->
            <van-search shape="round" v-model="value" placeholder="请输入搜索关键词" @click="gotosearch" />
            <!-- 轮播图 -->
            <Swiper :bannerArr="bannerArr"></Swiper>
            <!-- 宫格布局 -->
            <Grid :channel="channel"></Grid>
            <!-- 品牌直供 -->
            <Gridb :brandList="brandList"></Gridb>
            <!-- 新品首发 -->
            <Goodslist :newGoodsList="newGoodsList"></Goodslist>
            <!-- 人气推荐 -->
            <Popularity :hotGoodsList="hotGoodsList"></Popularity>
            <!-- 轮播二 -->
            <LunBoTwo :topicList="topicList"></LunBoTwo>
            <!-- 分类数据 -->
            <div v-for="item in categoryList" :key="item.id">
                <ProductList :goodsList="item.goodsList" :mytitle="item.name"></ProductList>
            </div>
        </div>
    </div>
</template>

<script>
// 引入首页的请求
import { getIndexList } from '@/utils/https';
// 引入轮播图组件
import Swiper from '@/components/Swiper'; //轮播图组件
import Grid from '@/components/Grid.vue'; //宫格
import Gridb from '@/views/Gridbotm.vue'; //品牌制造商直供
import Goodslist from '@/views/Newgoodslist.vue'; //周一周四，新品首发
import Popularity from '@/views/Popularity'; //人气推荐
import LunBoTwo from '@/views/Lunbotwo'; //专题精选
import ProductList from '@/components/ProductList';

// 导入grip宫格
export default {
    components: {
        Swiper,
        Grid,
        Gridb,
        Goodslist,
        Popularity,
        LunBoTwo,
        ProductList,
    },
    data() {
        return {
            value: '',
            bannerArr: [], // 轮播图数据
            channel: '',
            brandList: '',
            newGoodsList: '',
            hotGoodsList: '',
            topicList: '',
            categoryList: '',
        };
    },
    created() {
        getIndexList().then(res => {
            // console.log(getIndexList);
            // console.log(res);
            this.bannerArr = res.data.data.banner;
            this.channel = res.data.data.channel;
            this.brandList = res.data.data.brandList;
            this.newGoodsList = res.data.data.newGoodsList;
            this.hotGoodsList = res.data.data.hotGoodsList;
            this.topicList = res.data.data.topicList;
            // 分类
            this.categoryList = res.data.data.categoryList;
        });
    },
    methods: {
        gotosearch() {
            // 点击搜索框跳转
            this.$router.push('/home/searchpop');
            // console.log(this.$route);
        },
    },
};
</script>
<style lang="less" scoped>
.home {
    padding-bottom: 100px;
    // box-sizing: border-box;
    width: 100%;
    height: 100%;
}
</style>
>
